import * as echarts from 'echarts'
import 'echarts/map/js/china.js'

function parseTime(timestamp) { // 参数为需要进行格式转换的时间戳
  var date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '-'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
  // var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';   //时
  // var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';  //分
  // var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());  //秒
  // let strDate = Y+M+D+h+m+s;
  let strDate = Y + M + D
  // console.log(date.getMonth() )
  return strDate
}
// import geoJson from '../../components/china.json'
export default {
  data() {
    return {
      shortcuts: [{
        text: "近7天",
        value() {
          const end = new Date();
          const start = new Date();
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        }
      },
      {
        text: "近30天",
        value() {
          const end = new Date();
          const start = new Date();
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        }
      },
      {
        text: "近90天",
        value() {
          const end = new Date();
          const start = new Date();
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        }
      },
      {
        text: "近180天",
        value() {
          const end = new Date();
          const start = new Date();
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
          return [start, end];
        }
      },
      {
        text: "近360天",
        value() {
          const end = new Date();
          const start = new Date();
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
          return [start, end];
        }
      }
      ],
      //预约统计板块
      yynumber: '', //预约
      hxnumber: '', //核销数量
      hexnumber1: '', //核销率
      male: '',
      famale: '',
      cumulativeUsers: '',
      cumulativeVisits: '',
      data: [],
      data1: [],
      data11: [],
      num: 0,
      num1: 0,
      time: '',
      time1: '',
      timesyy: "",
      timeage: "",
      timedq: "",
      timesex: "",
      dates: [],
      dates1: [],
      times1: [],
      times: [],
      datesage: [],
      timesage: [],
      datesdq: [],
      timesdq: [],
      datessex: [],
      timessex: [],
      dateyy: [],
      timeyy: [],
      data1: [12, 19, 65, 45, 44, 23],
      data2: [12, 19, 6, 45, 55, 3],
      data3: [2, 19, 5, 45, 4, 23],
      timeData: ["2022-7-11", "2022-7-12", "2022-7-13", "2022-7-14", "2022-7-15", "2022-7-16"],
      width: 335,
      screenWidth: document.body.clientWidth,
      width: 335,
      spinShow1: false,
      time1: [],
      visitType: "活跃用户",
      spinShow2: false,
      visitType2: "活跃用户",
      time2: [],
      spinShow3: false,
      visitType3: "活跃用户",
      time3: [],
      museumId: "1",
      museumList: [],
      agex: [],
      agenum: [],
      cityx: [],
      cityy: []
    }
  },
  created() {
    let start = new Date()
    // console.log(start)
    var b = parseTime(start.getTime())
    // console.log(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30));
    var a = parseTime(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30))
    // console.log(a, b)
    let arr = [a, b]
    // console.log(arr)
    this.time = arr
    this.time1 = arr
    this.timeage = arr
    this.timedq = arr
    this.timesex = arr
    this.timesyy = arr
    // this.getmuseumList()

  },
  watch: {
    screenWidth(val) {
      let that = this;
      setTimeout(function () {
        var myChart1 = that.echarts.init(document.getElementById("chinaMap"));
        myChart1.resize();
      }, 300);
    },
    "$store.state.isCollapse"(val) {
      if (val) {
        this.width = 150;
      } else {
        this.width = 335;
      }
      let that = this;
      setTimeout(function () {
        var myChart1 = that.echarts.init(document.getElementById("chinaMap"));
        myChart1.resize();
      }, 300);
    }
  },
  mounted() {    
    this.gethostList()//实时数据
    this.sexlist()//性别数据
    this.oiMeter() //性别图
    this.agelist()//年龄数据
    this.getProvinceCities()//地图数据
    this.draw5()//地图图
    this.main2() //年龄分析图
    // this.cityMap() //城市地图
    this.citylist()//城市数据
    // this.showCityMap()

  },
  methods: {
     //实时获取到馆人数
     gethostList() {
      this.$http("/chongqing/stage/reservation-traveler/getTotalResult", {
        startDate: this.timedq.length == 0 ? '' : this.timedq[0],
        endDate: this.timedq.length == 0 ? '' : this.timedq[1]
      }, "post", (res) => {
        this.yynumber = res.data.data.bookNum,
          this.hxnumber = res.data.data.usedNum,
          this.hexnumber1 = res.data.data.usedRatio
      })
    },
     //性别比例数据
     sexlist() {
      this.$http(
        "/chongqing/stage/reservation-traveler/getSexResult",
        {
          start: this.timesyy.length == 0 ? '' : this.timesyy[0],
          end: this.timesyy.length == 0 ? '' : this.timesyy[1]
        },
        "post",
        (res) => {
          console.log("99999999999999999999", res);
          this.male = 10//0是女
          if (res.data.data.length > 0) {
            this.male = res.data.data[0].num//0是女
            this.famale = res.data.data[1].num//1是男
          } else {
            this.male = 0//0是女
            this.famale = 0//1是男
          }
          this.oiMeter()
        }

      )
    },
    //性别比例图
    oiMeter() {
      const chartDom1 = document.getElementById('sexop11'),
        // const chartDom1 = this.$refs.sexopa
        myChart1 = echarts.init(chartDom1),
        option1 = {
          tooltip: {
            trigger: 'item'
          },
          toolbox: {
            show: true,
            feature: {
              // mark: {show: true},
              // dataView: {show: true, readOnly: false},
              // restore: {show: true},
              saveAsImage: {
                show: true,
                title: '保存'
              }
            }
          },
          color: [
            "skyblue", "pink"
          ],
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '性别分布',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.male, name: '女' },
                { value: this.famale, name: '男' }
              ]
            }
          ]
        };
      option1 && myChart1.setOption(option1)
    },
   
    time1Changeyy() {
      console.log(this.timesyy, 444444444444444444444444);
      this.sexlist()
      this.agelist()
      this.citylist()
      this.getProvinceCities()
    },
    //年龄分布
    main2() {
      let chartDom = document.getElementById('main2'),
        myChart = echarts.init(chartDom),
        option
      option = {
        xAxis: {
          type: 'category',
          axisTick: { // 坐标轴的刻度
            show: false, // 是否显示
          },
          // data: ['0-5岁(学前)', '6-12岁(小学)', '13-15岁(中学)', '16-18岁(高中)', '18岁以上(成人)']
          data: this.agex
        },
        color: [
          "skyblue"
        ],
        yAxis: {
          type: 'value',
          axisLine: { // Y坐标轴轴线
            show: false, // 是否显示
          },
          axisTick: { // 坐标轴的刻度
            show: false, // 是否显示
          },
          axisLabel: { // 坐标轴的标签
            show: true, // 是否显示
            color: '#000', // 默认轴线的颜色
          },
        },
        toolbox: {
          show: true,
          feature: {
            // mark: {show: true},
            // dataView: {show: true, readOnly: false},
            // restore: {show: true},
            saveAsImage: {
              show: true,
              title: '保存'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [{
          data: this.agenum,
          type: 'bar'
        }]
      };
      option && myChart.setOption(option)
    },
    //年龄数据接口
    agelist() {
      this.$http(
        "/chongqing/stage/reservation-traveler/getAgeResult",
        {
          start: this.timesyy.length == 0 ? '' : this.timesyy[0],
          end: this.timesyy.length == 0 ? '' : this.timesyy[1]
        },
        "post",
        (res) => {
          console.log("55555555555555555555555555", res);         
          if (res.data.code == 1000) {
            if (res.data.data.length == 0) {
              this.agex=[]
              this.agenum=[]
              this.agex.push("暂无数据")
              this.agenum.push("0")
            }else {
              this.agex=[]
              this.agenum=[]
              // res.data.data.map(iten => {
              //   console.log(iten);
              //   this.agex.push(iten.ageRange)
              //   this.agenum.push(iten.num)
              // })
              this.agex.push( res.data.data[0].ageRange)
              this.agex.push( res.data.data[4].ageRange)
              this.agex.push( res.data.data[1].ageRange)
              this.agex.push( res.data.data[2].ageRange)
              this.agex.push( res.data.data[3].ageRange)
              this.agenum.push(res.data.data[0].num)
              this.agenum.push(res.data.data[4].num)
              this.agenum.push(res.data.data[1].num)
              this.agenum.push(res.data.data[2].num)
              this.agenum.push(res.data.data[3].num)
            }
          } 
          this.main2()
        }

      )
    },

    getmuseumList() {
      this.spinShow1 = true;
      this.spinShow2 = true;
      this.spinShow3 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 50) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 50) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getDay();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    // 得到默认时间
    getDay() {
      this.time3 = [];
      this.time3.push(this.getTime(this.getTime4(7)));
      this.time3.push(this.getTime(this.getTime4(1)));
      this.getProvinceCities();
    },
    randomData() {
      return Math.round(Math.random() * 50);
    },
    // 地图
    getProvinceCities() {
      this.$http(
        "/chongqing/stage/reservation-traveler/getProvinceResult", {
        start: this.timesyy.length == 0 ? '' : this.timesyy[0],
        end: this.timesyy.length == 0 ? '' : this.timesyy[1]
      },
        "post",
        res => {
          console.log("地图接口数据-----------------------", res.data.data)
          var item = [{
            "code": 110000,
            "area": "北京",
            "number": 0
          },
          {
            "code": 120000,
            "area": "天津",
            "number": 0
          },
          {
            "code": 130000,
            "area": "河北",
            "number": 0
          },
          {
            "code": 140000,
            "area": "山西",
            "number": 0
          },
          {
            "code": 150000,
            "area": "内蒙古",
            "number": 0
          },
          {
            "code": 210000,
            "area": "辽宁",
            "number": 0
          },
          {
            "code": 220000,
            "area": "吉林",
            "number": 0
          },
          {
            "code": 230000,
            "area": "黑龙江",
            "number": 0
          },
          {
            "code": 310000,
            "area": "上海",
            "number": 0
          },
          {
            "code": 320000,
            "area": "江苏",
            "number": 0
          },
          {
            "code": 330000,
            "area": "浙江",
            "number": 0
          },
          {
            "code": 340000,
            "area": "安徽",
            "number": 0
          },
          {
            "code": 350000,
            "area": "福建",
            "number": 0
          },
          {
            "code": 360000,
            "area": "江西",
            "number": 0
          },
          {
            "code": 370000,
            "area": "山东",
            "number": 0
          },
          {
            "code": 410000,
            "area": "河南",
            "number": 0
          },
          {
            "code": 420000,
            "area": "湖北",
            "number": 0
          },
          {
            "code": 430000,
            "area": "湖南",
            "number": 0
          },
          {
            "code": 440000,
            "area": "广东",
            "number": 0
          },
          {
            "code": 450000,
            "area": "广西",
            "number": 0
          },
          {
            "code": 460000,
            "area": "海南",
            "number": 0
          },
          {
            "code": 500000,
            "area": "重庆",
            "number": 0
          },
          {
            "code": 510000,
            "area": "四川",
            "number": 0
          },
          {
            "code": 520000,
            "area": "贵州",
            "number": 0
          },
          {
            "code": 530000,
            "area": "云南",
            "number": 0
          },
          {
            "code": 540000,
            "area": "西藏",
            "number": 0
          },
          {
            "code": 610000,
            "area": "陕西",
            "number": 0
          },
          {
            "code": 620000,
            "area": "甘肃",
            "number": 0
          },
          {
            "code": 630000,
            "area": "青海",
            "number": 0
          },
          {
            "code": 640000,
            "area": "宁夏",
            "number": 0
          },
          {
            "code": 650000,
            "area": "新疆",
            "number": 0
          },
          {
            "code": 710000,
            "area": "台湾",
            "number": 0
          },
          {
            "code": 810000,
            "area": "香港",
            "number": 0
          },
          {
            "code": 820000,
            "area": "澳门",
            "number": 0
          }
          ]
          //你可以自定义字段，
          item.map((i) => {
            i.name = i.area;
            i.value = i.number;
            return i
          });
          var data = res.data.data
          item.map((i) => {
            for (var p = 0; p < data.length; p++) {
              if (i.name == data[p].province) {
                i.value = data[p].num
              }
            }
            return i
          });
          // console.log(item);
          this.draw5(item);
        }
      );
    },
    // 改变条件
    onChange3(data) {
      this.time2 = data;
      this.getPlatforms(); //刷新
    },
    // 改变条件
    onChange4(data) {
      this.getPlatforms();
    },
    //中国地图
    draw5(data) {
      console.log(data);
      let dom = document.getElementById("chinaMap");
      let myChart = this.echarts.init(dom);
      myChart.setOption({
        tooltip: {
          trigger: "item"
        },
        visualMap: {
          show: true,
          x: "left",
          y: "20",
          color: [
            "#5475f5",
            "#9feaa5",
            "#85daef",
            "#74e2ca",
            "#e6ac53",
            "#9fb5ea"
          ]
        },
        series: [{
          name: "地区分布",
          type: "map",
          zoom: 1.1,
          mapType: "china",
          roam: false,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          data: data
        }]
      });
    },

    //城市数据
    citylist() {
      this.$http(
        "/chongqing/stage/reservation-traveler/getProvinceResult",
        {
          start: this.timesyy.length == 0 ? '' : this.timesyy[0],
          end: this.timesyy.length == 0 ? '' : this.timesyy[1]
        },
        "post",
        (res) => {   
          if(res.data.code==1000){
            if( res.data.data.length==0){
              this.cityx = [],
              this.cityy = []
              this.cityx.push("暂无数据")
              this.cityy.push("暂无数据")
            }else{
                this.cityx = [],
                this.cityy = []
                for (var i = 0; i < res.data.data.length; i++) {
                this.cityx.push(res.data.data[i].province)
                this.cityy.push(res.data.data[i].num)
          } 
            }
            this.cityMap()
          } else{
            this.$Message.error(res.data.msg)
          }  
        },

      )
    },
    //城市分布
    cityMap() {
      let chartDom = document.getElementById('cityMap'),
        myChart = echarts.init(chartDom),
        option
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            // mark: {show: true},
            // dataView: {show: true, readOnly: false},
            // restore: {show: true},
            saveAsImage: {
              show: true,
              title: '保存'
            }
          }
        },
        "grid": {
          "top": "10%",
          "left": "4%",
          "right": "15%",
          "bottom": "5%",
          "containLabel": true
        },
        color: ['skyblue'], //柱状图颜色
        xAxis: [{
          type: 'value',
          name: '用户数量',
          min: 0, //设置数量显示最小值
          // max: 250,//设置数量显示最大值
          
          axisLabel: {
            rotate: 60,
            interval: 'auto', //轴线间间距
          },
          // splitLine: { show: false },//隐藏网格线
          showMinLabel: true,
          showMaxLabel: true,
        }],
        yAxis: [{
          type: 'category',
          name: '省份',
          data: this.cityx,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            interval: 0, //轴线间间距
          },
        }],
        series: [{
          name: '数量',
          type: 'bar',
          data: this.cityy
        }]
      };
      option && myChart.setOption(option)
    }, 
    timeChange() {
      this.dates = []
      this.times = []
      this.getGuideTimes()
    },

    //年龄分布
    timeChangeage() {
      this.datesage = []
      this.timesage = []
      this.getGuideTimesage()
    },
    //地区分布
    timeChangedq() {
      this.datesdq = []
      this.timesdq = []
      // this.getGuideTimesagedq()
      this.gethostList()
    },
    //性别分布
    timeChangesex() {
      this.datessex = []
      this.timessex = []
      this.getGuideTimesagesex()
    },
    time1Change() {
      this.dates1 = []
      this.times1 = []
      this.getActivityResult()
    },
 
   


    getGuideTimeyy() {
      this.$http('/chongqing/stage/reservation-traveler/getSexResult', {
        start: this.timesyy.length == 0 ? '' : this.timesyy[0],
        end: this.timesyy.length == 0 ? '' : this.timesyy[1]
      }, 'post', (res) => {
        console.log(res, "/////////////////////////////////////////////////////////////")
        if (res.data.code == 1000) {
          this.guideTimeyy()
          if (res.data.data.length == 0) {
            this.data11 = [{
              name: '暂无数据',
              value: 0
            }]
          } else {
            this.bookNum = res.data.data.bookNum,
              this.usedNum = res.data.data.usedNum,
              this.hexnumber = res.data.data.usedRatio
          }

        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
  
    guideTimesage() {
      var chartDom2 = document.getElementById('mainage')
      var myChart2 = echarts.init(chartDom2)
      var option2
      option2 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.datesage,
          name: '年龄'
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.timesage,
          type: 'bar',
          color: '#1AAD19'
        }]
      }
      option2 && myChart2.setOption(option2)
    },

    guideTimesagedq() {
      var chartDom2 = document.getElementById('maindq')
      var myChart2 = echarts.init(chartDom2)
      var option2
      option2 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.datesdq,
          name: '区域'
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.timesdq,
          type: 'bar',
          color: '#1AAD19'
        }]
      }

      option2 && myChart2.setOption(option2)
    },
   
    guideTimesagesex() {
      var chartDom23 = document.getElementById('mainsex')
      var myChart2 = echarts.init(chartDom23)
      var option2
      option2 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.datessex,
          name: '区域'
        },

        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.timessex,
          type: 'line',
          color: '#1AAD19'
        }]
      }

      option2 && myChart2.setOption(option2)
    },
   
    activityResult() {
      var chartDom3 = document.getElementById('main')
      var myChart3 = echarts.init(chartDom3)
      var option3

      option3 = {
        tooltip: {
          trigger: 'axis'
          // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          //     type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        xAxis: {
          type: 'category',
          data: this.dates1,
          name: '活动'
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [{
          data: this.times1,
          type: 'bar',
          color: '#1AAD19'
        }]
      }

      option3 && myChart3.setOption(option3)
    }
  }
}
